.map-popup :global(.mapboxgl-popup-anchor-left) {
    &>:global(.mapboxgl-popup-tip) {
        border-right-color: var(--theme-bg-base);
    }
}

.map-popup :global(.mapboxgl-popup-anchor-right) {
    &>:global(.mapboxgl-popup-tip) {
        border-left-color: var(--theme-bg-base);
    }
}

.map-popup :global(.mapboxgl-popup-anchor-top),
.map-popup :global(.mapboxgl-popup-anchor-top-right),
.map-popup :global(.mapboxgl-popup-anchor-top-left) {
    &>:global(.mapboxgl-popup-tip) {
        border-bottom-color: var(--theme-bg-base);
    }
}

.map-popup :global(.mapboxgl-popup-anchor-bottom),
.map-popup :global(.mapboxgl-popup-anchor-bottom-right),
.map-popup :global(.mapboxgl-popup-anchor-bottom-left) {
    &>:global(.mapboxgl-popup-tip) {
        border-top-color: var(--theme-bg-base);
    }
}

.map-popup :global(.mapboxgl-popup-content) {
    padding: 10px;
    background-color: var(--theme-bg-base);
}

.map-popup :global(.mapboxgl-popup-close-button) {
    >span {
        font-size: 16px;
        color: var(--theme-color-base);
    }

    >span:hover {
        font-size: 16px;
        color: orangered
    }

    padding:5px 8px;
}